/*画像のサイズを画面のサイズに合わせる*/
.resizeimage{
  overflow:hidden;
}
.resizeimage img {
  width: 100%;
  /* 画像の幅を親要素に合わせる */
}
/**/

/* 見出し */
.contents>div:not(.STORY) {
  margin-top: 10vw;
}
/**/

/* フォントサイズ */
.contents>div>h2 /* 対象：見出し文字 */
{
  font-size: 5vw;
}
.STORY_textBox>p,  /* 対象：STORY説明書き */
.TP_textBox>div>p, /* 対象：PHOTOS説明書き */
.DOWNLOAD>div>a>u, /* 対象：DOWNLOADリンク */
.DOWNLOAD>div>p,   /* 対象：DOWNLOAD説明書き */
.DOWNLOAD>div>ul,  /* 対象：DOWNLOAD点箇条書き */
.DOWNLOAD>div>ol   /* 対象：DOWNLOAD数字箇条書き */
{
  font-size: 3.5vw;
  line-height: 1.5;
}
@media(min-width:500px) and (hover: hover) and (pointer: fine) {
  .STORY_textBox>p,  /* 対象：STORY説明書き */
  .TP_textBox>div>p, /* 対象：PHOTOS説明書き */
  .DOWNLOAD>div>a>u, /* 対象：DOWNLOADリンク */
  .DOWNLOAD>div>p,   /* 対象：DOWNLOAD説明書き */
  .DOWNLOAD>div>ul,  /* 対象：DOWNLOAD点箇条書き */
  .DOWNLOAD>div>ol   /* 対象：DOWNLOAD数字箇条書き */
  {
    font-size: 150%;
  }
}
/**/


/*ダウンロードリンク*/
.download-link {
  position: fixed;
  z-index: 10;
  top: 12vw;
  right: 2%;
}

.download-link img {
  width: 10vw !important;;
  max-width: 100px !important;;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
/**/


/*画像と文字を画像に張り付ける*/
.relative {
  position: relative;
  text-align: center;
}

.relative img.bord {
  position: relative;
  max-width: 100%;
  height: auto;
}

.relative img.imagup {
  position: absolute;
  top: -1vw;
  left: 50%;
  width: 87%;
  transform: translate(-50%,30%);
  color: #fff;

}

.relative p{
  position: absolute;
  text-align: center;
  font-size: 3vw;
  transform: translate(-50%, 0);
  left: 50%;
  color: #000000;
  height: auto;
  width: 200%;
  padding: 10px;
  margin-top: 38%;
  /* 内側の余白を10pxに設定 */
}
/**/


/* フォントサイズ-上に記述 */
/* .STORY{
  padding-bottom: 0px;
}
.STORY>h2{
  font-size: 5vw;
}
.STORY>div{
  font-size: 3.5vw;
  line-height: 1.5;
}
@media(min-width:500px) and (hover: hover) and (pointer: fine) {
    .STORY>div{
        font-size: 150%;
    }
} */


/* 左右分割とチェキ */
.STORY_Boxes{
  display: flex;
}
.STORY_textBox{
  top: 50%;
  width: 60%;
}
.STORY_chekiBox {
  display: flex;
  justify-content: center;  /* 水平中央 */
  align-items: center;      /* 垂直中央 */
  position: relative; /* photo用 */
  width: 40%;
  padding-right: 0px;
  padding-left: 5vw;/* textとのスペース確保 */
}
.STORY_cheki{
  object-fit: fill;
  max-width: 350px;
  max-height: 500px;
  width: 35vw; 
  height: 50vw;
}
.STORY_img{
  object-fit: contain;
  position: absolute; 
  max-width: 300px;
  width: 30vw;
  transform: translate(-0.3vw,-1vw);
}
/**/


/* フォントサイズ-上に記述 */
/* .TeamPHOTOS>h2 {
  font-size: 5vw;
}
.TP_textBox>div>p {
  font-size: 3.5vw;
  line-height: 1.5;
}
@media(min-width:500px) and (hover: hover) and (pointer: fine) {
  .TP_textBox>div>p {
    font-size: 150%;
  }
} */
/**/


/* PHOTOS 全体 */
.TeamPHOTOS {
  margin-bottom: 43vw; /* PHOTOSの縦幅確保 */
}
.TeamPHOTOS>.line2 {
  margin-bottom: 7vw; /* PHOTOSの縦幅確保 */
}
.TP_Boxes {
  margin-top: 20vw;
}

/* PHOTOS チェキ */
.TP_wire {
  width: 100%;
  position: absolute;
  left: 0;
}
.TP_wire>img {
  top: -30px;
  /* height: 5vw;
  width: auto; */
  width: 100%;
  height: auto;
  left: 0;
  position: relative;

  transform-origin: top center;
  transition: transform 0.3s ease;
}
.TP_imageSet {
    width: 37%;
    float: left;
    overflow: hidden;
    display: block;
    margin: 0 2vw 2vw 2vw;
}
.TP_imageSetL {
    margin-top: 10vw;
    margin-left: 5vw;
    transform: rotate(-3deg) scale(1.3);
    left: 4vw;
    z-index: 11; /* 重なり順指定 */
}
.TP_imageSetR {
    margin-top: 3vw;
    margin-left: 12vw;
    transform: rotate(5deg) scale(1.3);
    left: 75vw;
    z-index: 12; /* 重なり順指定 */
}
.TP_bordImage {
    width: 100%;
}
.TP_gameImage {
    width: 90%;
    border: 0.25vw solid #000000;
    top: 8vw; /* 筋肉式中央ぞろえ */
    left: 1.5vw; /* 筋肉式中央ぞろえ */
    margin: auto;
    position: absolute;  /* ボードの兄弟要素になる */
}

/* PHOTOS 文章 */
.TP_textBox:not(.TP_textBox01M6)  {
    overflow: visible;  /* 親要素にこれを施すと、子要素のfloatの影響を回避できる */
    margin-top: 4vw;

    /* グリッド表示設定 */
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2等分 */
    grid-auto-rows: minmax(20vw, auto);
}
.TP_textBox01M6 { /* チーム1だけ特殊配置 */
    overflow: visible;  /* 親要素にこれを施すと、子要素のfloatの影響を回避できる */
    margin-top: 4vw;

    /* グリッド表示設定 */
    display: grid;
    grid-template-columns: 1fr;  /* 2等分 */
    grid-auto-rows: minmax(20vw, auto);
}
hr {
  /* 区切り線用スタイル（明示的に色を指定） */
    width: 100%;
    height: 2px;
    background-color: #444;  /* 少し濃くする */
    border: none;
}
.TP_textBox>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.TP_textBox div p{ /* 統合用に追加 @mediaにも追加 */
    padding-left: 1vw;
    padding-right: 2vw;
    /* →フォントサイズは上で指定済み */
    /* font-size: 3.5vw; */
    /* line-height: 1.5; */
}

.floating-induction-button {
    display: block;
    margin: auto;
    /* ブロック自体の設定 */
    border: none;
    /* button特有の枠線を消す */
    border-radius: 1vw;
    padding: 2vw;
    width: 20vw;
    height: 8vw;
    background-color: rgb(200, 255, 0);
    /* ブロックの位置の設定 */
    position: fixed;
    bottom: 0%;
    right: 0;
    transform: translate(0, -150%);
    border-radius: 1vw 0vw 0vw 1vw;

    font-size: 4vw;
    /* font-weight: bold; */
    color: rgb(0, 0, 0);
}

/* PC全画面表示時の調整 */
@media(min-width:1000px) and (hover: hover) and (pointer: fine) {
  .TP_wire {
    width: 100%;
    position: absolute;
    left: 0;
  }
  .TP_wire>img {
    top: -70px;
    /* height: 5vw;
    width: auto; */
    width: 100%;
    height: auto;
    left: 0;
    position: relative;
  }
  .TP_Boxes {
    margin-top: 20vw;
  }
  .TP_imageSet {
    width: 28%;
    float: left;
    overflow: hidden;
    display: block;
    margin: 0 2vw 2vw 2vw;
  }
  .TP_imageSetL {
      margin-top: 5vw;
      margin-left: 9vw;
      transform: rotate(-3deg) scale(1.3);
      left: 4vw;
      z-index: 11; /* 重なり順指定 */
  }
  .TP_imageSetR {
      margin-top: 1vw;
      margin-left: 19vw;
      transform: rotate(5deg) scale(1.3);
      left: 75vw;
      z-index: 12; /* 重なり順指定 */
  }
  .TP_bordImage {
      width: 100%;
  }
  .TP_gameImage {
      width: 90%;
      border: 0.25vw solid #000000;
      top: 6vw; /* 筋肉式中央ぞろえ */
      left: 1vw; /* 筋肉式中央ぞろえ */
      margin: auto;
      position: absolute;  /* ボードの兄弟要素になる */
  }

  /* PHOTOS 文章 */
  .TP_textBox {
      overflow: visible;  /* 親要素にこれを施すと、子要素のfloatの影響を回避できる */
      margin-top: 2vw;

      /* グリッド表示設定 */
      display: grid;
      grid-template-columns: 1fr 1fr;  /* 2等分 */
      grid-auto-rows: minmax(20vw, auto);
  }
  .TP_textBox>div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
  }
  /* .TP_textBox div p{ 統合用に追加 */
      /* →フォントサイズは上で指定済み */
      /* font-size: 140%; */
  /* } */
}
/**/


/*動画ファイルを画面中央に固定する*/
.video-wrapper {
  position: relative;
  height:50vw;
  margin-top: 50px;
}

video {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  height:auto;
  max-width: 75%;
  border: 0.7vw dashed white;
  display: block;
  box-sizing: border-box;
}

.border-box {
  width: 60%;
  background-color: rgb(0, 0, 0);
}

.border-box:before {
  content: "";
  display: block;
  padding-top: 75%;
}
/**/


/**/
.story-text {
  position: relative;
  transform: translate(0, 0%);
}
/**/


/*小タイトルのフォント*/
.title-text {
  font-size: 5vw;
  /* ピクセル単位で指定 */
  width: 80%;
  margin: 30px auto;
}
/**/


/*文字を書く欄*/
.container {
  position: absolute;
  font-size: 4vw;
  left: 10%;
  width: 50%;
  /* 幅を300pxに設定 */
  height: auto;
  /* 高さを150pxに設定 */
  padding: 10px;
  /* 内側の余白を10pxに設定 */
  border: 2px solid #333;
  /* 枠線を2pxの実線に設定 */
}
/**/


/*キービジュの画像のCSS*/
.keyvis {
  position: absolute;
  left: 65%;
  height: 100px;
  /* 親要素の高さ */
}

img {
  width: 70%;
  height: auto;
}
/**/


/*ツイッターの画像のリンク*/
.twitter-link {
  position: relative;
  left: 10%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.twitter-link img {
  width: 15%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.twitter-link:hover img {
  transform: scale(1.05);
}
/**/


/*ユーチューブの画像のリンク*/
.youtube-link {
  position: relative;
  left: 20%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.youtube-link img {
  width: 15%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.youtube-link:hover img {
  transform: scale(1.05);
}
/**/